import React, {useState} from 'react';
import { connect } from 'dva';
import { Menu, Icon, Layout, Input, Button } from 'antd';
import 'antd/dist/antd.css';

const { SubMenu } = Menu;
const { Content, Sider } = Layout;

function IndexPage() {

  const [selectedKey, setSelectedKey] = useState('home1')
  const [inputValue, setInputValue] = useState(1); // 文本框中显示的菜单名称
  const [menuValue, setMenuValue] = useState(1); // 文本框中显示的菜单名称

  const handleClick = (e) => {
    setSelectedKey(e.key);
    setInputValue(e.item.props.children);
  };

  const onSelectMenu = ({ key }) => {
    if (key === 'home1') {
      setMenuValue(1);
    } else if (key === 'about') {
      setMenuValue(2);
    } else if (key === 'contact') {
      setMenuValue(3);
    } else if (key === 'h5') {
      setMenuValue('option5');
    } else if (key === 'h6') {
      setMenuValue('option6');
    } else if (key === 'h7') {
      setMenuValue('option7');
    } else if (key === 'h8') {
      setMenuValue('option8');
    }
  };

  const onChangeInput = e => {
    setInputValue(e.target.value)
  }

  const handleSave = () => {
    if(inputValue) {
      setMenuValue(inputValue);
    }
    console.log(selectedKey, inputValue);
  }
  return (
    <Layout style={{ height: '100%',  borderRight: 0 }}>
    <Sider width={200} style={{ background: '#fff' }}>
      <Menu
        mode="inline"
        theme="dark"
        selectedKeys={[selectedKey]}
        onClick={handleClick}
        onSelect={onSelectMenu}
        defaultOpenKeys={['sub1']}
        style={{ height: '100%',  borderRight: 0 }}
      >
        <SubMenu
          key="sub1"
          title={
            <span>
              <Icon type="user" />
              subnav 1
            </span>
          }
        >
          <Menu.Item key="home1">{selectedKey === 'home1' ? menuValue : 1}</Menu.Item>
          <Menu.Item key="about">{selectedKey === 'about' ? menuValue : 2}</Menu.Item>
          <Menu.Item key="contact">{selectedKey === 'contact' ? menuValue : 3}</Menu.Item>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={
            <span>
              <Icon type="laptop" />
              subnav 2
            </span>
          }
        >
          <Menu.Item key="h5">{selectedKey === 'h5' ? menuValue : 'option5'}</Menu.Item>
          <Menu.Item key="h6">{selectedKey === 'h6' ? menuValue : 'option6'}</Menu.Item>
          <Menu.Item key="h7">{selectedKey === 'h7' ? menuValue : 'option7'}</Menu.Item>
          <Menu.Item key="h8">{selectedKey === 'h8' ? menuValue : 'option8'}</Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>
    <Layout style={{ padding: '0 24px 24px' }}>
      <Content
        style={{
          background: '#fff',
          padding: 24,
          margin: 0,
          minHeight: 280,
        }}
      >
         <Input key={selectedKey} value={inputValue} style={{ width: '20%' }} onChange={onChangeInput} />
         <Button onClick={handleSave}>保存</Button>
      </Content>
    </Layout>
  </Layout>
  );
}

export default connect()(IndexPage);
